<template>
  <div>
    <el-row style="padding-bottom: 20px;padding-top: 15px;">
      <el-col :span="20" :offset="2">
        <span>当前功能数量:{{toolsCount}}</span>
        <el-button-group>
          <el-button type="primary" icon="el-icon-edit" size="small"> 添加工具</el-button>
          <el-button type="success" icon="el-icon-share" size="small"> 重新加载配置</el-button>
        </el-button-group>
      </el-col>
    </el-row>

    <el-row>
      <el-col :span="20" :offset="2">
        <el-col v-for="(tool,key,index) in tools " class="tool-card">
          <router-link :to="tool.component" style="text-decoration: none" target="_blank">
            <el-card style="height:310px;position: relative;">
              <img :src="tool.logoLocation" class="image"/>
              <div class="text-center caption">
                <div>
                  <h3>{{tool.title}}</h3>
                  <small>{{tool.author}}</small>
                </div>

                <p>{{tool.desc}}</p>
              </div>
              <div class="bottom clearfix">
                <b class="total-calls">{{tool.totalCalls}}</b>
                <time class="time">{{tool.lastCallTime}}</time>
              </div>
            </el-card>
          </router-link>
        </el-col>
      </el-col>

    </el-row>

  </div>
</template>

<script>
    import apis from '../apis'
    import util from '../utils'

    export default {
        data() {
            return {
                toolsCount: 0,
                tools: []
            }
        },
        methods:{
        },
        created() {
            apis.index.listTools().then(res => {
                res.data.map(item => {
                    item.logoLocation = 'static/images/' + item.logo
                    item.lastCallTime = util.FormatUtil.dateFormat(item.lastCallTime, 'yyyy-MM-dd HH:mm:ss');
                    item.component = item.component || 'HelloWorld';
                    return item;
                });
                this.tools = res.data;
            });

            apis.index.toolscount().then(res => {
                this.toolsCount = res.data;
            })
        }
    }
</script>

<style scoped>
  .tool-card {
    max-width: 270px;
    margin-right: 10px;
    margin-bottom: 10px;
  }

  .caption p {
    font-size: 14px;
  }

  .image {
    margin: 0 auto;
    display: block;
    width: 100%;

    height: 130px;
  }

  .bottom > .total-calls {
    position: absolute;
    left: 5px;
    bottom: 2px;
  }

  .bottom > .time {
    position: absolute;
    right: 5px;
    bottom: 2px;
  }
</style>
